<template>
  <div>
    <video
      id="my-video"
      class="video-js vjs-default-skin vedio"
      controls
      style="width: 100%; height: 100%;"
    ></video>
  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";

export default {
  name: "VideoPlayer",
  props: {
    videoSrc: {
      type: String,
      required: true, // 视频地址为必传
    },
  },
  data() {
    return {
      player: null, // video.js 实例
    };
  },
  methods: {
    initPlayer() {
      // 初始化 video.js 播放器
      this.player = videojs("my-video", {
        controls: true,
        autoplay: true,
        preload: "auto",
        sources: [
          {
            src: this.videoSrc,
            type: "application/x-mpegURL",
          },
        ],
      });

      this.player.play();
    },
  },
  mounted() {
    this.initPlayer(); // 在组件挂载时初始化播放器
  },
  beforeDestroy() {
    // 销毁播放器
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>

<style scoped>

</style>
